<template>
  <!-- 图片预览模式 -->
  <div class="img-view-dialog" @mousewheel="onMousewheel">
    <!-- 遮罩层 -->
    <div class="img-view__mask" />
    <!-- <span class="el-image-viewer__btn el-image-viewer__close" title="关闭" @click="dialogVisible = false"><i class="el-icon-close" /></span> -->
    <span v-if="imgViewList.length > 1" class="el-image-viewer__btn el-image-viewer__prev" title="上一张" @click="switchoverImg('prev')"><i class="el-icon-arrow-left" /></span>
    <span v-if="imgViewList.length > 1" class="el-image-viewer__btn el-image-viewer__next" title="下一张" @click="switchoverImg('next')"><i class="el-icon-arrow-right" /></span>
    <div class="el-image-viewer__btn el-image-viewer__actions">
      <div class="el-image-viewer__actions__inner">
        <i class="el-icon-zoom-out" title="缩小" @click="imgStyleChange('out')" />
        <i class="el-icon-zoom-in" title="放大" @click="imgStyleChange('in')" />
        <i class="el-icon-refresh-left" title="左旋转" @click="imgStyleChange('left')" />
        <i class="el-icon-refresh-right" title="右旋转" @click="imgStyleChange('right')" />
        <i class="el-icon-download" title="下载" @click="imgViewDownLoad" />
      </div>
    </div>
    <div class="el-image-viewer__canvas">
      <template v-for="(img,index) in imgViewList">
        <img
          v-if="index === imgViewIndex"
          :key="index"
          :src="img.downLoadPath"
          class="el-image-viewer__img"
          :style="'transform: scale('+imgViewStyle.transform+') rotate('+imgViewStyle.rotate+'deg)'"
          style="margin-left: 0px; margin-top: 0px; max-height: 100%; max-width: 100%;"
        >
      </template>
    </div>
  </div>
</template>

<script>
export default {
    name: 'ImgView',
    components: {

    },
    props: {

    },
    data() {
        return {
            imgViewList: [],
            imgViewIndex: 0,
            imgViewStyle: {
                transform: 1,
                rotate: 0
            },
            wfAttachUrl: ''
        }
    },
    computed: {

    },
    watch: {

    },
    created() {
        this.imgViewList = JSON.parse(sessionStorage.getItem('IMG_VIEW_LIST_' + this.$route.query.busiDataId))
        this.imgViewIndex = Number(sessionStorage.getItem('IMG_INDEX_' + this.$route.query.busiDataId))
        this.wfAttachUrl = this.$route.query.wfAttachUrl
    },
    beforeDestroy() {

    },
    mounted() {

    },
    methods: {
        // 上一张、下一张
        switchoverImg(type) {
            this.imgViewStyle.transform = 1
            this.imgViewStyle.rotate = 0
            if (type === 'prev') {
                this.imgViewIndex = this.imgViewIndex === 0 ? this.imgViewList.length - 1 : this.imgViewIndex - 1
            } else {
                this.imgViewIndex = this.imgViewIndex === this.imgViewList.length - 1 ? 0 : this.imgViewIndex + 1
            }
        },
        // 修改预览图片的样式
        imgStyleChange(type) {
            if (type === 'out') {
                this.imgViewStyle.transform = this.imgViewStyle.transform.toFixed(1) > 0.2 ? this.imgViewStyle.transform - 0.2 : 0.2
            } else if (type === 'in') {
                this.imgViewStyle.transform = this.imgViewStyle.transform += 0.2
            } else if (type === 'left') {
                this.imgViewStyle.rotate -= 90
            } else if (type === 'right') {
                this.imgViewStyle.rotate += 90
            }
        },
        // 图片预览水表滚轮事件
        onMousewheel(e) {
            if (e.deltaY > 0) {
                this.imgStyleChange('out')
            } else {
                this.imgStyleChange('in')
            }
        },
        // 图片预览下载
        imgViewDownLoad() {
            const downUrl = process.env.VUE_APP_BASE_API + '/' + this.wfAttachUrl + '/downloadById?inline=false&attachIds=' + this.imgViewList[this.imgViewIndex].id + '&topdf=false&httpPort=' + location.port
            window.open(downUrl, '_self')
        }
    }
}
</script>

<style scoped lang="scss">
.img-view-dialog{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    .img-view__mask{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 1;
        background: #000;
    }
    .el-image-viewer__actions__inner{
        cursor: pointer;
    }
    .el-image-viewer__close{
        background-color: #606266;
        color: #fff;
        font-size: 24px;
    }
}
</style>
